<template>
    <el-card shadow="never" class="!border-none">
        <el-form ref="formRef" class="mb-[-16px]" :inline="true" @submit.native.prevent>
            <el-form-item label="用户信息">
                <el-input
                    class="w-[280px]"
                    v-model="queryParams.keyword"
                    placeholder="用户编号/昵称/手机号码"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetPage">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card shadow="never" class="!border-none mt-4">
        <el-table size="large" v-loading="pager.loading" :data="pager.lists">
            <el-table-column label="id" prop="id" min-width="90" />
            <el-table-column label="用户昵称" prop="nickname" min-width="180">
                <template #default="{ row }">
                    <div class="flex items-center">
                        <el-image :src="row.avatar" class="w-[48px] h-[48px]"></el-image>
                        <div>{{ row.nickname }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="签到奖励" prop="changelessPoints" min-width="180">
                <template #default="{ row }">
                    <div>{{ row.changelessPoints || 0 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="连续天数" prop="days" min-width="180">
                <template #default="{ row }">
                    <div>{{ row.days || 0 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="连续奖励" prop="additionalPoints" min-width="180">
                <template #default="{ row }">
                    <div>{{ row.additionalPoints || 0 }}</div>
                </template>
            </el-table-column>
            <el-table-column label="到账积分" prop="changePoints" min-width="180" />
            <el-table-column label="签到时间" prop="addTime" min-width="180" />
        </el-table>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import { signInRecode } from '@/api/finance/finance'

//params
const queryParams = ref({
    keyword: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: signInRecode,
    params: queryParams.value
})

onMounted(() => {
    getLists()
})
</script>

<style lang="scss" scoped></style>
